//初始值
var page = 1;

//给换一换加点击事件
document.querySelector("#btn").addEventListener('click',function () {
   //让page加1
    page++;
    //解决追加问题
    document.querySelector("#list").innerHTML = "";
    //执行ajax方法
    loadXMLDoc();
});


//获取json数据用的ajax方法
function loadXMLDoc() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var json = xmlhttp.responseText;
            //吧获取到的数据，转成数组对象格式，方便js操作
            json = JSON.parse(json);
            //console.log(json.shop);
            for(let i = 0;i < json.shop.length;i++){
                console.log(json.shop[i]);
                //创建节点
                var img = document.createElement('img');
                img.src = json.shop[i].pic;
                //创建h3节点
                var h3 = document.createElement('h3');
                h3.innerHTML = json.shop[i].title;


                var h6 = document.createElement('h6');
                h6.innerHTML = json.shop[i].had;



                var shallow = document.createElement('shallow');
                shallow.innerHTML = json.shop[i].shallow;

                var deep = document.createElement('deep');
                deep.innerHTML = json.shop[i].deep;



                var span = document.createElement('span');
                span.innerHTML = json.shop[i].bai;

                var h5 = document.createElement('h5');
                h5.innerHTML = json.shop[i].yq;

                var fu = document.createElement('sp');
                fu.innerHTML = json.shop[i].fu;

                //创建p节点
                var p = document.createElement('p');
                p.innerHTML = json.shop[i].price;

                var h4 = document.createElement('h4');
                h4.innerHTML = json.shop[i].jiage;
                //创建div节点
                var div = document.createElement('div');

                //向div标签追加3个子标签
                div.appendChild(img);
                div.appendChild(h3);
                div.appendChild(h6);
                div.appendChild(shallow);
                div.appendChild(deep);
                div.appendChild(span);
                div.appendChild(h5);
                div.appendChild(fu);
                div.appendChild(p);
                div.appendChild(h4);

                console.log(div);

                //把3个div标签追加到最大的div#list标签
                document.querySelector("#list").appendChild(div);

            }

            //document.getElementById("mydiv").innerHTML = xmlhttp.responseText;
        }
        if (page>4){
            page = 4;
        }
    };
    xmlhttp.open("GET",page + ".json",true);
    xmlhttp.send();
}

//先执行一遍ajax方法
loadXMLDoc();